<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="foods">
			<div>
				<h2>美食</h2>
			</div>
			<div id="foodsIpt">
				<label>
					火锅<input type="checkbox" value="f1" onclick="fn5()"/>
				</label>	
				<label>
					羊蝎子<input type="checkbox" value="f2" onclick="fn5()"/>
				</label>
				<label>
					海底捞<input type="checkbox" value="f3" onclick="fn5()"/>
				</label>
				<label>
					呷哺呷哺<input type="checkbox" value="f4" onclick="fn5()"/>
				</label>
				<label>
					辣唇号<input type="checkbox" value="f5" onclick="fn5()"/>
				</label>
				<label>
					巴奴<input type="checkbox" value="f6" onclick="fn5()"/>
				</label>
					青菜<input type="checkbox" value="f7" onclick="fn5()"/>
				</label>
			</div>
			<br />
			<div>
				<button type="button" onclick="fn1()">获取选中项</button>
				
				<br /><br />
				
				<button type="button" onclick="fn2()">设置选中项</button>
				
				<br /><br />
				
				<label>
					全选/全不选<input id="checkAll" class="kky" type="checkbox" onclick="fn3(this)" />
				</label>
				<br />
				<br />
				<button type="button" onclick="fn4()">反选</button>
			</div>
		</div>
		<script>
			//获取 多选框 选中项
		   function fn1(){
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   console.log("ipts:",ipts);
			   var foodsArr=[];//存放被选中项
			   for(var i=0;i<ipts.length;i++){
				   if(ipts[i].checked){
					   foodsArr.push(ipts[i].value);
				   }
			   }
			   
			   console.log("你选中了:",foodsArr);
		   }
		   
		   //设置 多选框 选中项
		   function fn2(){
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   ipts[0].checked=true;
			   ipts[2].checked=true;
			   ipts[4].checked=true;
		   }
		   //全选/全不选
		   function fn3(that){
			   //console.log("全选/全不选",that,"我自己是否被选中",that.checked);
			   var f=that.checked;//全选/全不选 的选中状态
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   for(var i=0;i<ipts.length;i++){
				   ipts[i].checked=f;
			   }
			   
		   }
		   //反选
		   function fn4(){
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   for(var i=0;i<ipts.length;i++){
					
					ipts[i].checked = !ipts[i].checked;// !取反
					
			   }
			   
			   fn5();//判断是否选中 全选/全不选
		   }
		   //是否需要选中  全选/全不选
		   function fn5(){
			   var checkAll=document.getElementById("checkAll");
			   var ipts=document.querySelectorAll("div#foodsIpt label input[type='checkbox']");
			   var f=true;
			   
			   for(var i=0;i<ipts.length;i++){
				   if(!ipts[i].checked){
					   f=false;
					   break;
				   }
			   }
				checkAll.checked=f;
		   }
		   
		   
		</script>
	</body>
</html>
